<template>
  <div class="login">
    <div class="login-con">
      <ul class="menu-tab">
        <li v-for="(v) in MenuData" :class="{current: v.current}" :key="v.type" @click="clieckMenu(v)">
          {{ v.txt }}
        </li>
    </ul>
    <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    class="demo-ruleForm"
    >
    <el-form-item prop="username">
      <label>邮箱</label>
      <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item prop="password">
      <label>密码</label>
      <el-input
        v-model="ruleForm.password"
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item prop="checkPass" v-show="model==='register'">
      <label>重复密码</label>
      <el-input v-model="ruleForm.checkPass" type="password" />
    </el-form-item>
    <el-form-item>
      <el-button :disabled="btnbool" type="primary" class="login-btn block" @click="submitForm(ruleFormRef)"
        >{{ model==='login'?'登陆':'注册'}}</el-button
      >
    </el-form-item>
  </el-form>
    </div>
  </div>



</template>

<script lang="ts" setup>
import { reactive, ref ,onMounted ,watch} from 'vue'
import type { FormInstance } from 'element-plus'

import {CheckEmail, CheckPassword} from "@/utils/validatefunction.js"

import link from "@/api/link.js"
import apiUrl from "@/api/url.js"
import { ElMessage } from 'element-plus'
import useMd5 from "@/hook/index"

import {useRouter} from "vue-router"
let router=useRouter()

const MenuData=reactive([
  {txt: "登陆",current: true, type:"login"},
  {txt: "注册",current: false, type:"register"},

])

let model = ref("login")
let btnbool = ref(true)

let clieckMenu=(item:any)=>{
  MenuData.forEach((elemt)=>{
    elemt.current = false
  })
  item.current = true
  model.value = item.type
}
const ruleFormRef = ref<FormInstance>()

const checkUser = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('邮箱不能为空!!'))
  } else if(CheckEmail(value)){
    return callback(new Error('邮箱格式不正确!!'))
  } else {
    callback()
  }
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('密码不能为空!!'))
  } else if(CheckPassword(value)){
    return callback(new Error('密码只能使用数字、特殊字符组成，1-8位!!'))
  } else {
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (model.value === "login"){
    callback()
  }
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else if (value !== ruleForm.password) {
    callback(new Error("二次输入的密码不一样!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  username: '',
  password: '',
  checkPass: ''
})

const rules = reactive({
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  username: [{ validator: checkUser, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (model.value==="login") {
        console.log("开始登陆")
        link(apiUrl.register,"get",{},{name:ruleForm.username,pwd:useMd5(ruleForm.password),}).then((ok:any)=>{
          console.log(ok)
          if(ok.data.length != 0){
            ElMessage('登陆成功')
            router.push("/home")
          }else{
            ElMessage.error('登陆失败')
          }
        })
      }else{
        console.log("注册")
        let data={
          name: ruleForm.username,
          pwd: useMd5(ruleForm.password)
        }
        link(apiUrl.register,"POST",data).then((ok:any)=>{
          console.log(ok)
          if(Object.keys(ok.data).length!=0){
            ElMessage('注册成功')
            model.value="login"
            MenuData.forEach(v=>{
              v.current=false
            })
            MenuData[0].current=true;
            
          }else{
            ElMessage.error('注册失败')
          }
        })
      }
      console.log('submit!')
      return false
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

watch(ruleForm,(oldval,newval)=>{
  if(model.value==="login"){
    if(newval.username!=""&&newval.password!=""){
      btnbool.value = false
    }else{
      btnbool.value = true
    }
  }else{
    console.log("注册")
    if(newval.username!=""&&newval.password!=""&&newval.checkPass!=""){
      btnbool.value = false
    }else{
      btnbool.value = true
    }
  }
})
onMounted(()=>{
  console.log(process.env.VUE_APP_API)
})

</script>

<style lang="scss">
.login {
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  height: 100%;
}
html,
body,
#app {
  height: 100%;
}
.menu-tab{
  text-align: center;
  li {
    display: inline-block;
    width: 88px;
    line-height: 36px;
    font-size: 14px;
    color: black;
    border-radius: 2px;
    cursor: pointer;
  }
  .current {
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);

  }
}

.demo-ruleForm {
  width: 30%;
  margin: 50px auto;
  label {
   display: block;
   margin-bottom: 3px; 
   font-size: 14px;
   color: rgba(174, 199, 171, 0.979);
  }
  .block {
    display: block;
    width: 100%;
  }
  .login-btn {
    margin-top: 20px;

  }
}

</style>
